iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 15
1
自我挑戰組

30天翻玩動態網站-會員需驗證才能看到部落格文章 系列 第 15

Day15 jQuery 與 Ajax 驗證註冊表單

  • 分享至 

  • xImage
  •  

接續昨天的文章:
Day14 翻玩register.php -Show me the code
今天我們要重點觀察的位角色,jQuery,在程式碼$中可以看到他的身影。

如果你是第一次看本系列的邦友,可以先點擊下方 Day01 文章,內含 30 秒的 Demo 短片跟原始碼下載。

內容

  • 程式碼
<!-- jQuery -->
    <script src="js/jquery.js"></script>
	
	<!-- Script -->
	<script type="text/javascript">
        $(document).ready(function () {

            $("#register").click(function () {

                fname = $("#fname").val();
                lname = $("#lname").val();
                email = $("#email").val();
                password = $("#password").val();

                $.ajax({
                    type: "POST",
                    url: "adduser.php",
                    data: "fname=" + fname + "&lname=" + lname + "&email=" + email + "&password=" + password,
                    success: function (html) {
                        if (html == 'true') {

                            $("#add_err2").html('<div class="alert alert-success"> \
                                                 <strong>Account</strong> processed. \ \
                                                 </div>');

                            window.location.href = "index.php";

                        } else if (html == 'false') {
                            $("#add_err2").html('<div class="alert alert-danger"> \
                                                 <strong>Email Address</strong> already in system. \ \
                                                 </div>');                    

                        } else if (html == 'fname') {
                            $("#add_err2").html('<div class="alert alert-danger"> \
                                                 <strong>First Name</strong> is required. \ \
                                                 </div>');
												 
						} else if (html == 'lname') {
                            $("#add_err2").html('<div class="alert alert-danger"> \
                                                 <strong>Last Name</strong> is required. \ \
                                                 </div>');

                        } else if (html == 'eshort') {
                            $("#add_err2").html('<div class="alert alert-danger"> \
                                                 <strong>Email Address</strong> is required. \ \
                                                 </div>');

                        } else if (html == 'eformat') {
                            $("#add_err2").html('<div class="alert alert-danger"> \
                                                 <strong>Email Address</strong> format is not valid. \ \
                                                 </div>');
												 
						} else if (html == 'pshort') {
                            $("#add_err2").html('<div class="alert alert-danger"> \
                                                 <strong>Password</strong> must be at least 4 characters . \ \
                                                 </div>');

                        } else {
                            $("#add_err2").html('<div class="alert alert-danger"> \
                                                 <strong>Error</strong> processing request. Please try again. \ \
                                                 </div>');
                        }
                    },
                    beforeSend: function () {
                        $("#add_err2").html("loading...");
                    }
                });
                return false;
            });
        });
    </script>

jQuery

起手式:官網
有不懂的google,stackoverflow.com

jQuery document ready

要用JavaScript操縱網頁的DOM元素時,必須等網頁完全載入後才可安全地進行操作,而要確保網頁載入,可使用jQuery的$( document ).ready()。

$( document ).ready(function() {
  // 在這寫 javascript 程式碼
});

下面的簡短寫法效果同$( document ).ready()

$(function() {
  // 在這撰寫 javascript 程式碼
});

Ajax

  • 懶人包:
    可與伺服器進行非同步更新,不需要重新載入整個網頁
    最常應用在用戶註冊、驗證信箱或用戶名是否有被重複使用,不用等到使用者填完資料就能驗證

  • 詳細資料:wiki/AJAX

前後端分離

  • 前後端作業完全分離,後端負責資料庫、API,前端負責頁面結構、API 介接。

    自從 Ajax 越來越普遍的情況下,前後端分離漸為許多公司開發的架構,同一個專案會在拆分成前端與後端,這樣完全的分離可以讓職責分得更清楚,但也同時需要更重視 “溝通”。

jQuery 搭配 Ajax

  • 驗證用戶資料,發出提示訊息
  • 非同步作用:不用重新整理網頁
  • jQuery ajax() 方法

總結

今天我們喵一下 jQuery,配合上 Ajax,可以快速的選擇網頁上的元素,並進行非同步更新,是不是很酷,明天會一窺PHP如何將使用者的資料傳到資料庫,敬請期待!/images/emoticon/emoticon82.gif


上一篇
Day14 翻玩register.php
下一篇
Day16 翻玩adduser.php 驗證與加密
系列文
30天翻玩動態網站-會員需驗證才能看到部落格文章 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言